<template>
  <div id="app" class="page-history">
    <scroll-fixed>
      <page-bar>
        <div slot="middle" class="header-tabs">
          <a href="javascript:;" class="on">历史</a>
          <a @click="go('fav')">收藏</a>
        </div>
        <a href="javascript:void(0);" slot="right" class="header-right" @click="page.edit = !page.edit">
          <span>{{page.edit ? '取消' : '编辑'}}</span>
        </a>
      </page-bar>
    </scroll-fixed>
    <scroll-list :disabled="true" :config="scroll">
      <section v-for="(section,index) in list" :key="index">
        <div class="sec-tit">
          <i>&#8226</i>{{section.time}}</div>
        <div class="sec-list">
          <ui-item v-for="item in section.list" :item="item" class="edit-item" @click.native="addItem(item)" :class="{'edit':page.edit ,'on':checkbox.indexOf(item.id)!== -1}" :key="item.id"></ui-item>
        </div>
      </section>
    </scroll-list>
    <page-error v-if="!list.length">
        <template slot="logo">
            <img src="../assets/no-history.jpg" class="logo">
        </template>
        <template slot="text">
            <p class="text">还没有历史记录</p>
        </template>
    </page-error>
    <div class="eidt-bar" v-show="page.edit">
      <a href="javascript:void(0);" @click="selectAll">全选</a>
      <a href="javascript:void(0);" @click="deleteItem">
        <i class="uicon uicon-del"></i> 删除</a>
    </div>
  </div>
</template>
<script>
import Items from "../components/items.vue";
import pageBar from "../components/pagebar.vue";
import scrollFixed from "../components/scrollFixed.vue";
import ScrollList from "../components/scrollList.vue";
import _ from "lodash";
import pageError from "../components/pageError.vue";

export default {
    name: "page-history",
    components: {
        [Items.name]: Items,
        [pageBar.name]: pageBar,
        [ScrollList.name]: ScrollList,
        [scrollFixed.name]: scrollFixed,
        [pageError.name]: pageError
    },
    data() {
        return {
            page: {
                edit: false
            },
            isSelectAll: false,
            scroll: {
                bottom: 'hidden'
            },
            checkbox: [],
            list: [],
            listIndex: 0,
            nowDate: ""
        };
    },
    mounted() {
        this.getHistoryList();
    },
    methods: {
        sortList() {
            return _.orderBy( this.$utils.history.list, ["history_time"], "desc" );
        },
        getHistoryList() {
            this.list = [];
            this.listIndex = 0;
            this.nowDate = this.$moment().format("L");

            this.sortList().forEach((i, index) => {
                let formTime = this.$moment(i.history_time || "").format("L");
                i.is_hot = 0;
                i.is_top = 0;
                let item = Object.assign(i,{
                    type: "normal",
                    time: i.issue_date,
                    src: i.cover_img[0],
                    view: i.browse_total,
                    url: i.detail_url
                })

                if (index == 0 || (index != 0 && formTime != this.list[this.listIndex - 1].history_time)) {
                    let time = index == 0 && this.nowDate == formTime ? "今天" : formTime;

                    this.list.push({
                        history_time: formTime,
                        time: time,
                        list: [item]
                    });

                    this.listIndex++;
                } else {
                    this.list[this.listIndex - 1].list.push(item);
                }
            });

            if(this.list.length > 0 ){
                this.scroll.bottom = 'done';
            }else{
                this.scroll.bottom = 'hidden';
            }
        },
        go(path) {
            location.href = this.$config.pages[path];
        },
        loadmore() {
        },
        deleteItem() {
            this.checkbox.forEach(i => {
                this.$utils.history.remove(i);
            });
            this.getHistoryList();
        },
        selectAll() {
            if (this.isSelectAll) {
                this.checkbox = [];
                this.selectAll = false;
            } else {
                this.isSelectAll = true;
                this.list.forEach(section => {
                    section.list.forEach(item => {
                        this.checkbox.indexOf(item.id) === -1 &&
                            this.checkbox.push(item.id);
                    });
                });
            }
        },
        addItem(item) {
            if (this.page.edit) {
                let idx = this.checkbox.indexOf(item.id);
                if (idx === -1) {
                    this.checkbox.push(item.id);
                } else {
                    this.checkbox.splice(idx, 1);
                }
            }
        }
    }
};
</script>
<style lang="less">
.page-history {
    background: #fff;
    .header-tabs {
        display: flex;
        height: 82px;
        font-size: 30px;

        a {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            color: #919191;
            & + a {
                margin-left: 80px;
            }
            &.on {
                font-weight: bold;
                color: #333;
            }
            &.on::before {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                right: 0;
                margin: auto;
                width: 80%;
                height: 6px;
                background-color: #e64a19;
                border-radius: 3px;
            }
        }
    }
    .header-right {
        color: #e64a19;
        font-size: 30px;
    }

    .sec-list.is-edit {
        padding-bottom: 90px;
    }

    .edit-item {
        position: relative;

        &.edit {
            padding-left: 100px;

            &::after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 2;
            }
        }

        &.edit.on::before {
            content: "\0393";
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            background-color: #e64a19;
            border: none;
            font-size: 30px;
        }
        &.edit::before {
            content: "";
            position: absolute;
            left: 25px;
            right: 0;
            top: 50%;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 2px solid #c6c6c6;
            transform: translateY(-50%) rotate(-135deg);
        }
    }
    .eidt-bar {
        position: fixed;
        z-index: 999;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 0 30px;
        justify-content: space-between;
        height: 90px;
        font-size: 28px;
        background-color: rgba(230, 74, 25, 0.9);

        &,
        a {
            display: flex;
            align-items: center;
        }
        a {
            justify-content: center;
            color: #fff;
            i {
                margin-right: 8px;
            }
        }
    }

    section {
        & + section {
            border-top: 1px solid #efefef;
        }

        .sec-tit {
            i {
                margin-right: 18px;
            }
            padding: 24px 30px 0;
            background-color: #fff;
            font-size: 32px;
            color: #e64a19;
        }
    }
    .no-history {
        height: 100%;
        background: #fff;
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;

        .hostory-logo{
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            width: 100%;
            height: 300px;
            background: url(../assets/no-history.jpg) no-repeat center center / cover;
        }
    }
    .detail-end {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 106px;
        color:#c6c6c6;
        font-size:28px;
    }
}
</style>


